import React, { useCallback, useMemo } from "react";
import { useGeneral } from "@/hooks/useGeneral";
import { Link } from "react-router-dom";
import "./index.less";

export const Index: React.FC = () => {
  const { generalState, setGeneralLoading } = useGeneral();
  const handleChangeLoadingStatus = useCallback(() => {
    setGeneralLoading(!generalState.loading);
  }, [generalState.loading, setGeneralLoading]);
  return useMemo(() => {
    return (
      <div>
        <Link to={"/about"}>about</Link>
        <p className="red">{generalState.loading ? "加载中" : "未加载"}</p>
        <button onClick={handleChangeLoadingStatus}>改变状态</button>
      </div>
    );
  }, [generalState.loading, handleChangeLoadingStatus]);
};

export default Index;
